<template>
    <div class="hello">
        <el-upload
                class="upload-demo"
                action="http://localhost:8081/upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :data="{'type':'product'}"
                :file-list="fileList"
                :on-success="handleSuccess"
                list-type="picture">
            <el-button size="small" type="primary">添加文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <el-button type="primary" @click="doAddPics">点击上传商品图片</el-button>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data() {
            return {
                fileList: [{
                    name: 'food.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }, {
                    name: 'food2.jpeg',
                    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
                }]
            };
        },
        methods: {
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            doAddPics() {
                axios.post("http://localhost:8081/uploadPics",this.fileList)
                .then(resp=>{
                  alert(resp.status)
                })
                .catch(error=>{
                    console.log(error);
                })
            },
            handleSuccess(response,file) {
                console.log(response);

                console.log(response.data)
                //成功过后构造对象插入fileList
                this.fileList.push({name:file.name,url:response.data})
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>
